<!-- <script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, toRefs, ref, toRef, watchEffect,shallowRef,triggerRef,customRef, toRaw ,onRenderTriggered,onRenderTracked,getCurrentScope} from 'vue'
import type { Ref, UnwrapNestedRefs } from 'vue/dist/vue.js'
import Test from './test.vue'
let {msg}=defineProps<{
  msg: string
}>()
console.log(msg)
// let obj11=reactive({foo:'foo'})
// let count = ref([3,4,5,6])
// let obj = reactive([count])
// let {foo}=toRefs(obj11)
// const emit3 = defineEmits<{
//   (e: 'change', id: number): void
//   (e: 'update', value: string): void
// }>()
// emit3('change',3)
// setTimeout(() => {
//   console.log(obj[0])
//   obj[0].value=[555]
// }, 2000);

// let refobj=ref({a:5})
// let refn=ref(6)
const b= reactive({a:7})
console.log(b)
// let a=toRef(2)

// setTimeout(() => {
//   a.value=3
// }, 1000);
// b.a=8
// a.value
// console.log(refobj)
// console.log(refn);
// console.log(a)
console.log(b);
// let clean=function(){
//   console.log('clean')
// }
// let data=reactive({data:23445})
// watchEffect((onclean)=>{
//   onclean(clean)
//    let n=refn.value+6
//    data.data=n
// })
// refn.value++

// const shallow = shallowRef({
//   greet: 'Hello, world'
// })
// // 触发该副作用第一次应该会打印 "Hello, world"
// watchEffect(() => {
//   console.log(shallow.value.greet)
// })
// setTimeout(() => {
//   // 这次变更不应触发副作用，因为这个 ref 是浅层的
// shallow.value.greet = 'Hello, universe'

// // 打印 "Hello, universe"
// triggerRef(shallow)
// }, 2000);

// function useDebouncedRef<t>(value:t, delay = 200) {
//   let timeout:any
//   return customRef<t>((track, trigger) => {
//     return {
//       get() {
//         track()
//         return value
//       },
//       set(newValue) {
//         clearTimeout(timeout)
//         timeout = setTimeout(() => {
//           value = newValue
//           trigger()
//         }, delay)
//       }
//     }
//   })
// }
// let refffff=useDebouncedRef<number>(4)
// refffff.value=4
let obj={a:345}
let reObj=reactive(obj)
reObj.a=8909;
console.log(obj)
console.log(reObj)
onRenderTriggered((...arg)=>{
  console.log('onRenderTriggered',arg)
})
onRenderTracked((...arg)=>{
  console.log('onRenderTracked',arg)
})
onMounted(function () {
  console.log(getCurrentInstance()?.proxy)
  console.log(getCurrentScope())
})
</script>

<template>
  <div class="greetings">
    <Test></Test>
    <h1 class="green">{{ reObj.a }}</h1>
    <div>{{b.a}}</div>
    <h3>
      You’ve successfully created a project with
      <a target="_blank" rel="noopener" @click="emit3('update', 'df')">Vite</a>
      +
      <a href="https://vuejs.org/" target="_blank" rel="noopener" @click="emit3('change', 3)"
        >Vue 3</a
      >. What's next?
    </h3>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style> -->
<template>
  <div><Test></Test></div>
</template>
<script>
import Test from './test.vue'
 export default{
     components:{
      Test
     },
     beforeCreate(){
      console.log('hellowwro')
     }
 }
</script>